<template>
  <div>
    <Modal
      v-model="addModal"
      :closable="false"
      :footer-hide="true"
    >
      <div class="modal-content">
        <div class="modal-header">
          <span>新增角色</span>
          <a @click="closeDialog()">
            <svg-icon icon-class="close" />
          </a>
        </div>
        <div class="modal-body">
          <Form ref="formValidate" :model="formItem" :rules="ruleValidate" :label-width="80">
            <FormItem label="角色名称" prop="roleName">
              <Input 
                v-model="formItem.roleName" 
                placeholder="请输入角色名称" 
                clearable/>
            </FormItem>
            <FormItem label="角色描述">
              <Input 
                v-model="formItem.description" 
                type="textarea"
                placeholder="请输入角色描述" />
            </FormItem>
          </Form>
        </div>
        <div class="modal-footer">
            <Button @click="closeDialog()">取消</Button>
            <Button
              type="primary"
              @click="submitRole('formValidate')"
            >确定</Button>
          </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { addRole } from '@/api/permission'
export default {
  props: {
    addModal: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formItem: {
        roleName: '',
        description: ''
      },
      ruleValidate: {
        roleName: [
          { required: true, message: '请填写角色名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    closeDialog() {
      this.$emit('update:addModal', false)
      this.$refs['formValidate'].resetFields()
    },
    submitRole(name) {
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          try {
            const res = await addRole(this.formItem)
            console.log(res, 'lll');
            this.closeDialog()
            this.$emit('addRoleSuccess')
            this.$Message.success('添加角色成功!');
          } catch(err) {
            return err
          }
        } else {
          this.$Message.error('请完整填写表单!');
        }
      })
    }
  }

}
</script>

<style lang="less" scoped>
/deep/ .modal-content .modal-body {
  padding: 20px 70px;
}
</style>